<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>mouseover和mouseenter的区别</title>
    <style>
        .father {
            width: 400px;
            height: 400px;
            background-color: skyblue;
        }

        .son {
            width: 200px;
            height: 200px;
            margin: 0 auto;
            background-color: yellow;
        }
    </style>
</head>
<body>
<div class="father">
    <div class="son"></div>
</div>
</body>
</html>
<script !src="">
    // 获取元素
    const father = document.querySelector('.father')
    const son = document.querySelector('.son')

    // 老：onmouseover(鼠标经过--会冒泡)      mouseout(鼠标离开--会冒泡)
    // 新：mouseenter(鼠标经过--不会冒泡)    mouseleave(鼠标离开--不会冒泡)
    // father.addEventListener('mouseover', function() {
    //   console.log('经过父亲了')
    // })
    // son.addEventListener('mouseover', function() {
    //   console.log('经过儿子了')
    // })


    // father.addEventListener('mouseenter',function (){
    //   console.log('进入父盒子')
    // })
    // son.addEventListener('mouseenter',function (){
    //   console.log('进入子盒子')
    // })

    // mouseout 鼠标离开
    // 判定特性: 离开父盒子进入子盒子, 也会判定为离开了父盒子, 在鼠标经过显示 div 的业务中会导致 bug, 一般都推荐使用 mouseleave 来进行鼠标离开的业务
    // father.addEventListener('mouseout', function() {
    //   console.log('离开父亲了')
    // })
    // son.addEventListener('mouseout', function() {
    //   console.log('离开儿子了')
    // })

    father.addEventListener('mouseleave', function () {
        console.log('离开父盒子')
    })
    son.addEventListener('mouseleave', function () {
        console.log('离开子盒子')
    })
</script>